<template>
  <div class="content">
    <el-card class="card-box">
      <div class="card-box--headerwrap">
        <el-page-header content="详情" @back="goback"></el-page-header>
        <div class="card-box--setbtn" v-if="mo !== 'look'">
          <el-button @click="goback">取消</el-button>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
        </div>
      </div>
    </el-card>
    <el-card class="card-box form-box">
      <el-form
        :disabled="mo === 'look'"
        ref="formRef"
        @submit.prevent
        :model="formState"
        :rules="Rules"
        label-width="120px"
      >
        <el-form-item
          label="标题内容"
          placeholder="请输入标题内容"
          prop="title"
        >
          <el-input
            class="width-custom220"
            v-model="formState.title"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="信息摘要"
          placeholder="请输入信息摘要"
          prop="summary"
        >
          <el-input v-model="formState.summary" type="textarea" :row="3" />
        </el-form-item>

        <el-form-item
          label="信息类型"
          placeholder="请选择信息类型"
          prop="infoType"
        >
          <el-select v-model="formState.infoType">
            <el-option
              class="default-option"
              v-for="item in infoManageType"
              :label="item.key"
              :key="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布单位" prop="publishDepts">
          <el-cascader
            ref="deptTreePartakeRef"
            style="width: 100%"
            popper-class="dept-cas"
            v-model="formState.deptCode"
            clearable
            filterable
            :options="joinDeptList"
            :props="defaultProps"
            @change="handleCheckChangePartake"
            placeholder="输入名称搜索"
          />
        </el-form-item>
        <el-form-item label="公开范围">
          <el-radio-group v-model="publicScope" @change="handleChangePublic">
            <el-radio :label="2">全部公开</el-radio>
            <el-radio :label="3">项目组内公开</el-radio>
            <el-radio :label="1">选定人员公开</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" v-if="publicScope === 3">
          <span>选择项目组：</span>
          <!-- <el-select v-model="formState.documentName">
              <el-option
                v-for="item in [1, 2, 3]"
                :label="item"
                :key="item"
                :value="item"
              ></el-option>
            </el-select> -->
          <el-select
            v-model="publicIds"
            clearable
            multiple
            filterable
            value-key="id"
            placeholder="请选择"
            @change="handlePublicProject"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.projectName"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" v-if="publicScope === 1">
          <span>选择成员：</span>
          <el-select
            v-model="publicIds"
            multiple
            filterable
            clearable
            remote
            value-key="id"
            placeholder="请输入姓名搜索"
            :remote-method="query => getTableLeaderData(query, 'public')"
            @change="handlePublicUser"
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下载权限">
          <el-radio-group v-model="dowloadScope" @change="handleChangeDownload">
            <el-radio :label="2">所有人可下载</el-radio>
            <el-radio :label="3">项目组成员可下载</el-radio>
            <el-radio :label="1">选定人员可下载</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" v-if="dowloadScope === 3">
          <span>选择项目组：</span>
          <el-select
            v-model="dowloadIds"
            clearable
            multiple
            filterable
            value-key="id"
            placeholder="请选择"
            @change="handleDownLoadProject"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.projectName"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" v-if="dowloadScope === 1">
          <span>选择成员：</span>
          <el-select
            v-model="dowloadIds"
            multiple
            filterable
            clearable
            remote
            value-key="id"
            placeholder="请输入姓名搜索"
            :remote-method="query => getTableLeaderData(query, 'down')"
            @change="handleDownLoadUser"
          >
            <el-option
              v-for="item in downUserList"
              :key="item.id"
              :label="item.name"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--
        <el-row>
          <el-col :span="12">
            <el-form-item label="上传图片" prop="coverImg">
              <el-upload
                ref="uploadImg"
                name="uploadFile"
                :limit="1"
                accept="image/*"
                :action="uploadComUrl"
                :headers="uploadHeaders"
                :on-success="handleSuccessImg"
                :on-remove="handleRemoveImg"
                :on-error="handleError"
                :file-list="defaultImgFileList"
                :before-upload="beforeImgUpload"
                :on-exceed="handleExceed"
                :on-preview="handlePreview"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    支持上传png、jpg、jpeg等格式文件,图片尺寸建议（1920*360）px,文件大小不得大于5M。
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row> -->
        <!--
        <el-row>
          <el-col :span="12">
            <el-form-item label="上传文档" prop="attachmentArr">
              <el-upload
                name="uploadFile"
                multiple
                :accept="acceptTypes"
                :action="uploadComUrl"
                :headers="uploadHeaders"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
                :on-error="handleError"
                :file-list="defaultFileList"
                :before-upload="beforeAvatarUpload"
                :on-preview="handlePreview"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    支持上传doc、docx、xls、xlsx、pdf、ppt、pptx、png、jpg、jpeg等格式文件,文件大小不得大于10M。
                  </div>
                </template>
              </el-upload>


            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col>
            <el-form-item label="上传文档" prop="attachment">
              <ecm-upload
                :files="defaultFileList"
                :docid="docid"
                @setFile="handleSuccess"
              ></ecm-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formState.remark"
            type="textarea"
            :row="3"
          ></el-input>
        </el-form-item>
        <div
          style="
            border: 1px solid #ccc;
            z-index: 9999;
            margin-bottom: 20px;
            margin-left: 50px;
          "
        >
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="formState.content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
        <!-- <el-form-item label="发布时间" prop="publishTime">
          <el-date-picker
            v-model="formState.publishTime"
            type="datetime"
            value-format="YYYY-MM-DD hh:mm:ss"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="信息排序" prop="sortNum">
          <el-select v-model="formState.sortNum">
            <el-option
              class="default-option"
              v-for="item in sortList"
              :label="item"
              :key="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="停用时间" prop="offtime">
          <el-date-picker
            v-model="formState.offtime"
            type="datetime"
            value-format="YYYY-MM-DD hh:mm:ss"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item> -->
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  components: { Editor, Toolbar }
};
</script>

<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  // computed,
  shallowRef,
  onBeforeUnmount,
  nextTick
} from "vue";
import { cloneDeep } from "lodash-es";
import { useRouter, useRoute } from "vue-router";
import NotifMessage from "/@/utils/message/notification";
import * as api from "/@/api/information";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";
import { postProjectList2 } from "/@/api/project";
import { getUsersForScience } from "/@/api/user";

import { infoManageType } from "../types";

import { useUpload } from "/@/hooks";
import { postDeptList } from "/@/api/dept";
import { postSysCompanyList } from "/@/api/organization";
import { storageLocal } from "/@/utils/storage";
import EcmUpload from "/@/components/ecmUpload/index.vue";
const { uploadHeaders, onInitFileList } = useUpload();

// const projectRef = ref<HTMLElement | null>(null) as any;
// const projectTreeRef = ref<HTMLElement | null>(null) as any;
const formRef = ref<HTMLFormElement | null>(null) as any;
// const uploadImg = ref();

const router = useRouter();
const route = useRoute();
const mo = route.query.mode;

// let sortList = ["1", "2", "3", "4", "5"];

let publicScope = ref(2);
let publicIds = ref([]);

let dowloadScope = ref(2);
let dowloadIds = ref([]);

let projectList = ref([]);
let userList = ref([]);
let downUserList = ref([]);
let joinDeptList = ref([]);
let docid = window["ecmDocType"].information;
const formState = reactive({
  summary: "",
  title: "",
  infoType: "",
  content: "",
  // documentAuth: "",
  remark: "",
  attachmentArr: [],
  coverImg: [],
  publishTime: "",
  sortNum: "",
  offtime: "",
  authItems: [],
  deptName: "",
  deptCode: ""
});

// 富文本相关

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const defaultProps = {
  children: "children",
  label: "deptDescShrt",
  value: "id",
  checkStrictly: true,
  emitPath: false
};
const initDeptList = async () => {
  const { code, data } = await postDeptList({
    pageSize: 0
  });
  let deptList = [];
  if (code === 200) {
    deptList = data.map(item => {
      return {
        id: item.id,
        deptDescShrt: item.deptDescShrt,
        children: item.children
      };
    });
  }
  let companyList = [];
  const res = await postSysCompanyList({
    pageSize: 0
  });
  if (res.code === 200) {
    res.data.list.map(el => {
      companyList.push({
        id: el.id+'',
        deptDescShrt: el.companyName,
        isEmp: true
      });
    });
  }

  joinDeptList.value = [
    {
      deptDescShrt: "内部单位",
      disabled: true,
      children: deptList,
      id: "0-0"
    },
    {
      deptDescShrt: "外部单位",
      disabled: true,
      children: companyList,
      id: "0-1"
    }
  ];
};
const deptTreePartakeRef = ref<HTMLElement | null>(null) as any;
const handleCheckChangePartake = (item: any) => {
  console.log(item);
  const selected = deptTreePartakeRef.value.getCheckedNodes();
  if (selected.length > 0) {
    const data = selected[0].data;
    formState.deptName = data.deptDescShrt;
    formState.deptCode = data.id;
  } else {
    formState.deptName = "";
    formState.deptCod = "";
  }
};
onMounted(() => {
  initDeptList();
  nextTick(() => {
    const toolbar = DomEditor.getToolbar(editorRef.value);
    // console.log(toolbar.getConfig().toolbarKeys, "123");
  });
});

const mode = "default";

// 内容 HTML
// const valueHtml = ref("<p>hello</p>");

const toolbarConfig = {
  excludeKeys: [
    // "group-image",
    "group-video",
    "headerSelect",
    "italic",
    "group-more-style" // 排除菜单组，写菜单组 key 的值即可
  ]
};

type InsertFnType = (url: string, alt: string, href: string) => void;

const editorConfig = {
  readOnly: mo === "look" ? true : false,
  placeholder: "请输入内容...",
  MENU_CONF: {
    uploadImage: {
      // server: uploadComUrl,
      server: "/rdms-admin/common/file/public/upload",
      // form-data fieldName ，默认值 'wangeditor-uploaded-image'
      fieldName: "uploadFile",

      // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 100 * 1024 * 1024, // 10M

      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,

      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ["image/*"],

      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      // meta: {
      //     token: 'xxx',
      //     otherKey: 'yyy'
      // },

      // 将 meta 拼接到 url 参数中，默认 false
      // metaWithUrl: false,

      // 自定义增加 http  header
      headers: uploadHeaders,

      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,

      // 超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒
      // 小于该值就插入base64格式
      base64LimitSize: 5 * 1024, // 5kb

      onSuccess(file: File, res: any) {
        console.log(`${file.name} 上传成功`, res);
      },
      // 单个文件上传失败
      onFailed(file: File, res: any) {
        console.log(`${file.name} 上传失败`, res);
      },
      // 上传错误，或者触发 timeout 超时
      onError(file: File, err: any, res: any) {
        console.log(`${file.name} 上传出错`, err, res);
      },

      // 自定义插入图片
      customInsert(res: any, insertFn: InsertFnType) {
        // res 即服务端的返回结果
        console.log(res, "res");
        const { url, fileName: alt } = res.data;
        // 从 res 中找到 url alt href ，然后插图图片
        insertFn(url, alt, "");
      }
    }
  }
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = editor => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

// 富文本相关

const Rules = {
  summary: [{ required: true, message: "请输入信息摘要", trigger: "blur" }],
  title: [{ required: true, message: "请输入信息标题", trigger: "change" }],
  infoType: [{ required: true, message: "请选择信息类型", trigger: "change" }]
};

let defaultImgFileList = ref([]);

let defaultFileList = ref([]);

const handleSuccess = res => {
  defaultFileList.value = res.file;
  formState.attachmentArr = res.file;
  formRef.value.clearValidate();
};
/* 上传文件 -- end */

const handleChangePublic = event => {
  console.log(event, "event");
  publicIds.value = [];
  formState.authItems = formState.authItems.filter(item => {
    return item?.operType !== "R";
  });
  if (event === 1) {
    const info = storageLocal.getItem("rdms-info");
    publicIds.value.push({
      id: info.userId,
      name: info.name
    });
    formState.authItems.push({
      itemId: info.userId,
      itemType: event,
      operType: "R",
      itemName: info.name
    });
    if (userList.value.findIndex(el => el.id === info.userId) === -1) {
      userList.value.push({
        id: info.userId,
        name: info.name
      });
    }
  }
};

const handlePublicProject = item => {
  console.log(item);
  const newAuthItems = [];
  publicIds.value.forEach(i => {
    const project = projectList.value.find(el => el.id === i.id);
    newAuthItems.push({
      itemId: i.id,
      itemType: publicScope.value,
      operType: "R",
      itemName: project.projectName
    });
  });
  formState.authItems = formState.authItems.filter(i => {
    return i.operType === "D";
  });

  formState.authItems = formState.authItems.concat(newAuthItems);
  formState.authItems = uniqWith(formState.authItems);
};

const handlePublicUser = item => {
  console.log(item);
  const newAuthItems = [];
  publicIds.value.forEach(i => {
    newAuthItems.push({
      itemId: i.id,
      itemType: publicScope.value,
      operType: "R",
      itemName: i.name
    });
    if (userList.value.findIndex(el => el.id === i.id) === -1) {
      userList.value.push({
        id: i.id,
        name: i.name
      });
    }
  });
  formState.authItems = formState.authItems.filter(i => {
    return i.operType === "D";
  });

  formState.authItems = formState.authItems.concat(newAuthItems);
  formState.authItems = uniqWith(formState.authItems);
};

const handleChangeDownload = event => {
  console.log(event, "event");
  dowloadIds.value = [];
  formState.authItems = formState.authItems.filter(item => {
    return item?.operType !== "D";
  });
  if (event === 1) {
    const info = storageLocal.getItem("rdms-info");
    dowloadIds.value.push({
      id: info.userId,
      name: info.name
    });
    formState.authItems.push({
      itemId: info.userId,
      itemType: event,
      operType: "D",
      itemName: info.name
    });
    if (downUserList.value.findIndex(el => el.id === info.userId) === -1) {
      downUserList.value.push({
        id: info.userId,
        name: info.name
      });
    }
  }
};

const handleDownLoadProject = item => {
  console.log(item);
  const newAuthItems = [];
  dowloadIds.value.forEach(i => {
    const project = projectList.value.find(el => el.id === i.id);
    newAuthItems.push({
      itemId: i.id,
      itemType: dowloadScope.value,
      operType: "D",
      itemName: project.projectName
    });
  });
  formState.authItems = formState.authItems.filter(i => {
    return i.operType === "R";
  });

  formState.authItems = formState.authItems.concat(newAuthItems);
  formState.authItems = uniqWith(formState.authItems);
};

const handleDownLoadUser = item => {
  console.log(item);
  console.log(dowloadIds, "dowloadIds");
  const newAuthItems = [];
  dowloadIds.value.forEach(i => {
    newAuthItems.push({
      itemId: i.id,
      itemType: dowloadScope.value,
      operType: "D",
      itemName: i.name
    });
    if (downUserList.value.findIndex(el => el.id === i.id) === -1) {
      downUserList.value.push({
        id: i.id,
        name: i.name
      });
    }
  });
  formState.authItems = formState.authItems.filter(i => {
    return i.operType === "R";
  });

  formState.authItems = formState.authItems.concat(newAuthItems);
  formState.authItems = uniqWith(formState.authItems);
};

// 去重
function uniqWith(arr) {
  // 缓存用于记录
  const cache = [];
  for (const t of arr) {
    // 检查缓存中是否已经存在
    if (cache.find(c => c.itemId === t.itemId && c.operType === t.operType)) {
      // 已经存在说明以前记录过，现在这个就是多余的，直接忽略
      continue;
    }
    // 不存在就说明以前没遇到过，把它记录下来
    cache.push(t);
  }
  // 记录结果就是过滤后的结果
  return cache;
}

const goback = () => {
  router.push("/system/information");
};

const getDetail = async () => {
  const params = {
    id: route.query.id
  };
  const { code, data } = await api.postInfoManageInfo(params);
  if (code === 200) {
    const {
      // createTime,
      // createUserName,
      // billNum,
      // summary,
      summary,
      title,
      infoType,
      // documentAuth,

      coverImg,
      // publishTime,
      // sortNum,
      // offtime,

      content,
      deptName,
      deptCode,
      remark,
      attachmentArr,
      authItems
    } = data;

    // infoState.createTime = createTime;
    // infoState.createUserName = createUserName;
    // infoState.billNum = billNum;

    formState.summary = summary;
    formState.title = title;
    formState.deptName = deptName;
    formState.deptCode = deptCode;
    // formState.documentAuth = documentAuth;

    // formState.publishTime = publishTime;
    // formState.sortNum = sortNum;
    // formState.offtime = offtime;

    formState.infoType = infoType;

    formState.remark = remark;
    formState.content = content;
    attachmentArr.map(el => {
      el["name"] = el.fileName;
    });
    formState.attachmentArr = attachmentArr;
    formState.coverImg = coverImg;

    defaultFileList.value = attachmentArr;
    if (coverImg) {
      formState.coverImg = [JSON.parse(coverImg)];
      defaultImgFileList.value = onInitFileList([JSON.parse(coverImg)]);
    }

    //  itemId: i,
    //   itemType: publicScope.value,
    //   operType: "R"

    formState.authItems = authItems;
    authItems.forEach(item => {
      if (item.operType === "R" && item.itemType == "1") {
        publicScope.value = 1;
      } else if (item.operType === "R" && item.itemType == "3") {
        publicScope.value = 3;
      } else if (item.operType === "D" && item.itemType == "1") {
        dowloadScope.value = 1;
      } else if (item.operType === "D" && item.itemType == "3") {
        dowloadScope.value = 3;
      }
    });

    const pub = authItems.filter(item => {
      return item.operType === "R";
    });
    pub.map(i => {
      publicIds.value.push({
        id: +i.itemId,
        name: i.itemName
      });

      // if (projectList.value.findIndex(el => el.id === +i.itemId) === -1) {
      //   projectList.value.push({ id: +i.itemId, projectName: i.itemName });
      // }

      if (publicScope.value === 3) {
        if (projectList.value.findIndex(el => el.id === +i.itemId) === -1) {
          projectList.value.push({
            id: +i.itemId,
            projectName: i.itemName
          });
        }
      } else if (publicScope.value === 1) {
        if (userList.value.findIndex(el => el.id === +i.itemId) === -1) {
          userList.value.push({
            id: +i.itemId,
            name: i.itemName
          });
        }
      }
    });

    const dow = authItems.filter(item => {
      return item.operType === "D";
    });
    dow.map(i => {
      dowloadIds.value.push({
        id: +i.itemId,
        name: i.itemName
      });
      // if (projectList.value.findIndex(el => el.id === +i.itemId) === -1) {
      //   projectList.value.push({ id: +i.itemId, projectName: i.itemName });
      // }

      if (dowloadScope.value === 3) {
        if (projectList.value.findIndex(el => el.id === +i.itemId) === -1) {
          projectList.value.push({
            id: +i.itemId,
            projectName: i.itemName
          });
        }
      } else if (dowloadScope.value === 1) {
        if (downUserList.value.findIndex(el => el.id === +i.itemId) === -1) {
          downUserList.value.push({
            id: +i.itemId,
            name: i.itemName
          });
        }
      }
    });
    // if (
    //   projectList.value.findIndex(el => el.id === formState.projectName.id) ===
    //   -1
    // ) {
    //   projectList.value.push(formState.projectName);
    // }
  }
};

const handleSubmit = async () => {
  const isValid = await new Promise(resolve => formRef.value.validate(resolve));
  if (!isValid) return;
  const copyFormData = cloneDeep(formState);
  console.log(copyFormData, "copyFormData");
  if (formState.coverImg.length > 0) {
    copyFormData.coverImg = JSON.stringify(formState.coverImg[0]);
  } else {
    copyFormData.coverImg = "";
  }

  if (route.query.mode === "add") {
    const { code, message } = await api.postInfoManageAdd(copyFormData);

    if (code === 200) {
      NotifMessage.success("保存成功");
      goback();
    } else {
      NotifMessage.error(message);
    }
  } else {
    const { code, message } = await api.postInfoManageUpdate(
      Object.assign(copyFormData, { id: route.query.id })
    );
    if (code === 200) {
      NotifMessage.success("修改成功");
      goback();
    } else {
      NotifMessage.error(message);
    }
  }
};

// 获取项目信息
const getProjectList = async () => {
  try {
    const { code, data } = await postProjectList2({ pageNum: 1, pageSize: 0 });
    if (code === 200) {
      projectList.value = data.list;
    }
  } catch (err) {
    console.log(err);
  }
};

async function getTableLeaderData(query = "", type) {
  try {
    const params = {
      pageNum: 1,
      pageSize: 0,
      name: query
      // nameLike: query
    };
    const { code, data } = await getUsersForScience(params);
    if (code === 200) {
      if (type === "public") {
        userList.value = data.list.map(item => {
          return {
            id: item.id,
            name: item.name + (item.deptName ? "-" + item.deptName : "-无")
          };
        });
      } else if (type === "down") {
        downUserList.value = data.list.map(item => {
          return {
            id: item.id,
            name: item.name + (item.deptName ? "-" + item.deptName : "-无")
          };
        });
      }
    }
  } catch (err) {
    console.log(err);
  }
}

// getProjectList()
// getTableLeaderData()

onMounted(async () => {
  await getProjectList();
  // await getTableLeaderData();
  if (route.query.mode !== "add") {
    getDetail();
  }
});
</script>

<style lang="scss" scoped>
.content {
  :deep .el-page-header__content {
    font-size: 16px;
  }

  .card-box {
    margin-bottom: 10px;

    &--headerwrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &--setbtn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 140px;
    }
  }

  .header__wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.form-box {
  margin-top: 10px;
}

.form-info {
  margin-bottom: 20px;
}

.header-btns {
  text-align: right;
}
</style>
